<template>
  <AppLayout>
    <div class="container">
      <XtxBread>
        <XtxBreadItem path="/">首页</XtxBreadItem>
        <Transition name="fade-right" mode="out-in">
          <XtxBreadItem :key="categoryData?.id">{{
            categoryData?.name
          }}</XtxBreadItem>
        </Transition>
      </XtxBread>
      <XtxCarousel
        v-if="bannerList"
        :bannerList="bannerList"
        :autoPlay="true"
        :style="{ height: '500px' }"
      ></XtxCarousel>
      <!--      全部二级分类-->
      <ShowSubCategoryList
        :categoryData="categoryData?.children"
      ></ShowSubCategoryList>
      <!--      二级商品分类推荐-->
      <RecommendGoods></RecommendGoods>
    </div>
  </AppLayout>
</template>

<script>
import AppLayout from "@/components/AppLayout";
import XtxBread from "@/components/library/XtxBread";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
import { computed } from "vue";
import XtxCarousel from "@/components/library/XtxCarousel";
import useBanners from "@/hooks/useBanners";
import ShowSubCategoryList from "@/views/category/components/ShowSubCategoryList";
import RecommendGoods from "@/views/category/components/RecommendGoods";
export default {
  name: "OneCategory",
  components: {
    ShowSubCategoryList,
    XtxCarousel,
    XtxBread,
    AppLayout,
    RecommendGoods,
  },
  setup() {
    // 获取一级分类列表
    const categoryData = usecategory();
    // 获取轮播图数据
    const { getData, banners } = useBanners();
    getData();
    return {
      categoryData,
      bannerList: banners,
    };
  },
};
function usecategory() {
  const store = useStore();
  const route = useRoute();
  // 通过计算属性,
  // 判断数据id
  return computed(() => {
    return store.state.category.list.find(
      (item) => item.id === route.params.id
    );
  });
}
</script>

<style scoped></style>
